<template>
  <!-- 这里是状态栏 -->
  <!-- <view class="status_bar">
		
	</view> -->
  <view class="container">
    <swiper class="swiper-box" indicator-dots autoplay circular>
      <!-- 第一张图用swiper-item包裹 -->
      <swiper-item v-for="banner of bannerList" :key="banner.id">
        <navigator
          class="banner-link"
          :url="'/pages/index/news?nurl=' + banner.transferUrl"
        >
          <image v-if="banner.fileUrl" :src="banner.fileUrl" lazy-load></image>
          <view v-else class="no-image"></view> </navigator
        >。
      </swiper-item>
      <!-- 第二张图 -->
      <!-- <swiper-item>
				<image src="/static/images/sw1.jpg"></image>
			</swiper-item> -->
    </swiper>
    <view class="entrance-bar">
      <view
        class="entrance-bar-item"
        @tap="redirectFunc('/pages/card/index')"
        style="letter-spacing: 40rpx"
      >
        <image
          class="entrance-icon"
          mode="aspectFit"
          src="/static/images/icon_wjsq.png"
        ></image>
        卡牌
      </view>
      <view class="entrance-bar-item" @tap="redirectFunc('/pages/match/index')">
        <image
          class="entrance-icon"
          mode="aspectFit"
          src="/static/images/icon_mdlb.png"
        ></image>
        门店列表
      </view>
      <view class="entrance-bar-item" @tap="redirectGuide">
        <image
          class="entrance-icon"
          mode="aspectFit"
          src="/static/images/icon_xszn.png"
        ></image>
        新手指南
      </view>
    </view>
    <view class="news-bar">
      <view class="news-title">
        <image
          class="news-icon"
          mode="aspectFit"
          src="/static/images/icon_sjx.png"
        ></image>
        热点资讯
      </view>

      <navigator
        :url="'/pages/index/news?nurl=' + info?.transferUrl"
        v-for="info of informationList"
        :key="info.id"
      >
        <view class="news-item">
          <!-- <view class="news-bg"
					style="background: url(/static/images/bg1.jpg) no-repeat;background-size:100% 100%">

				</view> -->
          <image
            class="news-bg"
            v-if="info.fileUrl"
            :src="info.fileUrl"
            lazy-load
          ></image>
          <view v-else class="no-image"></view>
          <view class="news-bottom">
            <view class="newsinfo-time">{{
              formatDate(info.releaseDate, 'YYYY年MM月DD日')
            }}</view>
            <view class="newsinfo-title">{{ info?.informationName }}</view>
          </view>
        </view>
      </navigator>
      <!-- <view class="news-item">
				<image class="news-bg" src="/static/images/bg1.jpg"></image>
				<view class="news-bottom">
					<view class="newsinfo-time">2025-NN-NN</view>
					<view class="newsinfo-title">鸣潮TCG第一弹《往岁乘宵醒惊蛰》正式发布</view>
				</view>
			</view> -->
    </view>
  </view>
  <TabBar :active="0" />
</template>

<script setup>
import TabBar from '@/components/TabBar'
import { ref, reactive } from 'vue'
import { onLoad, onShareAppMessage, onReachBottom } from '@dcloudio/uni-app'
import { bannerListApi, informationListApi } from '@/api/information'
import { formatDate } from '@/utils/formatTime'

const informationList = ref([])
const bannerList = ref([])
const pagination = reactive({
  page: 0,
  size: 10,
  pageLimit: false
})

const redirectFunc = url => {
  uni.switchTab({
    url: url
  })
}

const redirectGuide = () => {
  uni.navigateTo({
    url:
      '/pages/index/news?title=新手规则&nurl=' +
      'https://mp.weixin.qq.com/s/oosvjgjjVOzGGCdCEvu3Pg'
  })
}

onLoad(() => {
  getBannerList()
  getInformationList()
})
onReachBottom(() => {
  // console.log("下拉事件");
  getInformationList()
})
onShareAppMessage(res => {
  // if (res.from === 'button') {// 来自页面内分享按钮
  //   console.log(res.target)
  // }
  return {
    title: '欢迎使用共鸣对决', // 分享标题
    path: '/pages/index/index' // 分享路径
    // imageUrl: 'https://example.com/image.png', // 分享图标
  }
})

const getBannerList = async () => {
  const res = await bannerListApi({
    pageNum: 1,
    pageSize: 10
  })
  bannerList.value = res.rows
}

const getInformationList = async () => {
  if (pagination.pageLimit) return
  pagination.pageLimit = true
  pagination.page++

  const params = {
    pageNum: pagination.page,
    pageSize: pagination.size
  }
  uni.showLoading({
    title: '正在加载...'
  })

  const res = await informationListApi(params)
  informationList.value = informationList.value.concat(res.rows)
  if (pagination.page * pagination.size >= res.total) {
    pagination.pageLimit = true
  } else {
    pagination.pageLimit = false
  }
  uni.hideLoading()
  // console.log('getInformationList', res)
}

// const handleRedirect = (item) => {
// 	if (!item.transferUrl) {
// 		return uni.showToast({
// 			title: '未配置资讯链接，无法跳转',
// 			icon: 'error'
// 		})

// 	}
// 	uni.navigateTo({
// 		url: '/pages/index/news?url=' + item.transferUrl
// 	});
// }
</script>

<style lang="scss" scoped>
// .status_bar {
// 	height: var(--status-bar-height);
// 	width: 100%;
// }

.container {
  background-color: #f1f1f1;
  padding-bottom: calc(120rpx + env(safe-area-inset-bottom));
}

.swiper-box {
  width: 100%;
  height: 514rpx;

  swiper-item {
    width: 100%;
    height: 100%;

    .banner-link {
      display: inline-block;
      width: 100%;
      height: 100%;

      image {
        width: 100%;
        height: 100%;
      }

      .no-image {
        background-color: $no-image-color;
        width: 100%;
        height: 100%;
      }
    }
  }
}

.entrance-bar {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  padding: 0 28rpx;
  width: 100%;
  box-sizing: border-box;
  margin-top: 2rpx;

  .entrance-bar-item {
    display: flex;
    align-items: center;
    gap: 32rpx;
    padding: 46rpx 36rpx;
    background-color: #3c3a36;
    text-align: center;
    border: 2rpx solid #c9ac67;
    color: #bb9f5e;
    letter-spacing: 4rpx;
    width: 38.3%;
    border-radius: 14rpx;
    /* x 偏移量 | y 偏移量 | 阴影模糊半径 | 阴影颜色 */
    box-shadow: 0 0 10rpx #00000059;
    margin-bottom: 32rpx;
    font-size: 36rpx;
    font-weight: 700;

    background-image: url('https://ucp-tcg.com:18001/mc/app/static/button-bg.png');
    background-repeat: no-repeat;
    background-size: 71% 100%;
    .entrance-icon {
      width: 68rpx;
      height: 68rpx;
      display: inline-block;
    }
  }
}

.news-bar {
  padding: 0 28rpx;
  // padding-bottom: 20rpx;

  .news-title {
    font-size: 32rpx;
    color: #333333;
    line-height: 44rpx;
    font-weight: 700;
    padding-bottom: 32rpx;

    .news-icon {
      width: 24rpx;
      height: 24rpx;
    }
  }

  .news-item {
    // border-radius: 14rpx;
    margin-bottom: 40rpx;

    .news-bg {
      height: 560rpx;
      width: 100%;
      display: block;
      border-radius: 14rpx 14rpx 0 0;
    }

    .no-image {
      height: 560rpx;
      width: 100%;
      display: block;
      border-radius: 14rpx 14rpx 0 0;
      background-color: $no-image-color;
    }

    .news-bottom {
      background-color: #131313;
      padding: 24rpx;
      font-size: 28rpx;
      border-radius: 0 0 14rpx 14rpx;

      .newsinfo-time {
        color: #d2cab8;
      }

      .newsinfo-title {
        color: #c9ac67;
      }
    }
  }
}
</style>
